<!DOCTYPE html>
<html >
<head>

		<style type="text/css">
			@import "../../../../dijit/themes/claro/claro.css";
		</style>
	<style type="text/css">
/* BEGIN .. css :: Things in this section have to be two tabs in */
	
        .row { width: 500px; display: inline-block; margin: 5px; }
        .cell { width: 20%;  display:inline-block; }

/* END .. css :: Things in this section have to be two tabs in */
</style>
<script src="../../../../dojo/dojo.js" data-dojo-config='parseOnLoad: true, mvc: {debugBindings: true}'></script><script>var searchRecords;

/* BEGIN .. js :: Things in this section have to be two tabs in */
 
		require([
			'dojo/parser',
			'dojo/ready',
			'dojox/mvc/getStateful',
			'dijit/form/TextBox',
			'dijit/form/Button',
			'dojox/mvc/Group',
			'dojox/mvc/WidgetList',
			'dojox/mvc/Output'
        ], function(parser, ready, getStateful){

        // Initial data
		var data = {
  			"identifier": "Serial",
   			"items": [ 
                    {
                        "Serial"  : "A111",
                        "First"   : "Anne",
                        "Last"    : "Ackerman",
                        "Email"   : "a.a@test.com"
                    },
                    {
                        "Serial"  : "B111",
                        "First"   : "Ben",
                        "Last"    : "Beckham",
                        "Email"   : "b.b@test.com"
                    },
                    {
                        "Serial"  : "I111",
                        "First"   : "Irene",
                        "Last"    : "Ira",
                        "Email"   : "i.i@test.com"
                    },
                    {
                        "Serial"  : "J111",
                        "First"   : "John",
                        "Last"    : "Jacklin",
                        "Email"   : "j.j@test.com"
                    }
                ]
			};

                // The getStateful call will take json data and create make it Stateful
                searchRecords = getStateful(data);
        });
        
/* END .. js :: */
        
        </script>
</head>
<body class="claro">
<!--  BEGIN .. html :: THINGS IN HERE START TWO TABS IN -->	
		<script type="dojo/require">at: "dojox/mvc/at"</script>
		<div id="main">
			<div data-dojo-type="dojox/mvc/Group"
				data-dojo-props="target: searchRecords">
        	<!--
                The WidgetList container denotes a templated UI that operates over
                a collection of data records.
        	-->
        	<h4>Declarative WidgetList using data-mvc-child-type to create TextBox with data bound to the First name from the items: </h4>
        	<div data-dojo-type="dojox/mvc/WidgetList"
                 data-dojo-props="children: at('rel:', 'items')"
                 data-mvc-child-type="dijit/form/TextBox"
                 data-mvc-child-props="value: at(this.target, 'First'),
                                                class: 'row'">
        	</div>
		</div>
		<h4>Declarative WidgetList using a dojox/mvc/InlineTemplate to create label with the Serial and a TextBox with data bound to the First name from the items: </h4>
		<div data-dojo-type="dojox/mvc/WidgetList"
			data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
			data-dojo-props="children: at(searchRecords, 'items')">
			<script type="dojox/mvc/InlineTemplate">
			<div>
				<span data-dojo-type="dijit/_WidgetBase"
						data-dojo-props="value: at('rel:', 'Serial'),
							_setValueAttr: {node: 'domNode',
									type: 'innerText'}">
					</span>:
					<span data-dojo-type="dijit/form/TextBox"
						data-dojo-props="value: at('rel:', 'First')"></span>
				</div>
			</script>
		</div>
		<p>Updates to either set of TextBoxes will be reflected in the other set when tabbing out of the field, since they are bound to the same model properties.
	</div>
<!--  END .. html :: THINGS IN HERE START TWO TABS IN -->	
</body>
</html>
